<template>
  <router-link to="/" active-class="current">Home</router-link> |
  <router-link to="/about" replace>About</router-link>|
  <router-link to="/todolist">ToDoList</router-link>|
  <router-link :to="'/news/'+newsId">news</router-link>|
  <router-link to="/mine">mine</router-link>|
  <router-link :to="{path:'/circle',query:{name:'a',age:'18'}}">circle</router-link>
  <button @click="toHome">home</button>
  <button @click="toAbout">about</button>
  <button @click="toNews">news</button>
  <button @click="toCircle">circle</button>
  <router-view/>
  <!-- <ToDoList /> -->
</template>

<script>
import { ref } from 'vue';
// import ToDoList from "./views/ToDoList.vue";
import {useRouter} from 'vue-router'

export default {
  // components: { ToDoList },
  setup(){
    //跳转首页
    const newsId=ref('001')
    const router=useRouter()
    const toHome=()=>{
      router.push('/')
    }
    const toAbout=()=>{
      router.replace('/about')
    }
    const toNews=()=>{
      router.push(`/news/${newsId.value}`)
    }
    const toCircle=()=>{
       router.push({path:'/circle',query:{name:'a',age:'18'}})
    }
    return{toHome,toAbout,newsId,toNews,toCircle}
  }
};
</script>

<style>
/* .router-link-style{
  color: red;
} */
.current{
  color: red;
}
</style>